<template>
  <div class="header">
    <!--背景图-->
    <div class="background">
      <img :src="seller.avatar">
    </div>
    <!--主要信息-->
    <div class="content-wrapper">
      <div class="avatar">
        <img :src="seller.avatar">
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{seller.name}}</span>
        </div>
        <div class="description">
          {{seller.description}}/{{seller.deliveryTime}}分钟送达
        </div>
        <div class="support" v-if="seller.supports">
          <span class="icon" :class="supportIcon[seller.supports[0].type]"></span>
          <span class="text">{{seller.supports[0].description}}</span>
        </div>
      </div>
      <div class="support-count" v-if="seller.supports">
        <span class="count">{{seller.supports.length}}个</span>
        <i class="icon-keyboard_arrow_right"></i>
      </div>
    </div>
    <!--公告-->
    <div class="bulletin-wrapper">
      <span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
      <i class="icon-keyboard_arrow_right"></i>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: ['seller'],
    data () {
      return {
        // 优惠图标
        supportIcon: ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../common/scss/mixin";

  .header {
    position: relative;
    background: rgba(7, 17, 27, 0.5);

    // 背景图
    .background {
      position: absolute;
      top:0;
      left: 0;
      width:100%;
      height:100%;
      z-index: -1;
      filter: blur(5px);
      overflow: hidden;
      img {
        width:100%;
        height:auto;
        position: absolute;
        top:-85%;
      }
    }

    // 主要内容
    .content-wrapper {
      display: flex;
      padding:24px 12px 18px 24px;
      color: #fff;
      position: relative;

      .avatar {
        margin-right: 16px;
        img {
          width: 64px;
          height: 64px;
          border-radius: 2px;
        }
      }

      .content {
        .title {
          margin-top: 2px;
          .brand {
            display: inline-block;
            width: 30px;
            height: 18px;
            margin-right:6px;
            @include bg-image('./img/brand');
            background-size:30px 18px;
            background-repeat: no-repeat;
            vertical-align: top;
          }
          .name {
            font-size: 16px;
            font-weight: bold;
            line-height: 16px;
          }
        }

        .description {
          margin-top: 8px;
          font-size: 12px;
          font-weight: 200;
          line-height: 12px;
        }

        .support {
          margin-top: 8px;
          .icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            background-size: 12px;
            background-repeat: no-repeat;
            vertical-align: bottom;
          }
          .decrease { @include bg-image('./img/decrease_1') }
          .discount { @include bg-image('./img/discount_1') }
          .special { @include bg-image('./img/special_1') }
          .guarantee { @include bg-image('./img/guarantee_1') }
          .invoice { @include bg-image('./img/invoice_1') }

          .text {
            font-size: 10px;
            font-weight: 200;
            line-height: 10px;
          }
        }
      }

      .support-count {
        position: absolute;
        bottom: 18px;
        right: 12px;
        background: rgba(0,0,0,.2);
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
        border-radius: 14px;
        font-size: 10px;
        .count {
          font-weight: 200;
        }
      }
    }

    // 公告
    .bulletin-wrapper {
      position: relative;
      height: 28px;
      line-height: 28px;
      padding:0 22px 0 12px;
      background: rgba(7,17,27,.2);
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .bulletin-title {
        display: inline-block;
        width: 22px;
        height: 12px;
        @include bg-image(  './img/bulletin');
        background-size: 22px 12px;
        background-repeat: no-repeat;
        vertical-align: top;
        margin-top:8px;
      }
      .bulletin-text {
        font-size: 10px;
        font-weight: 200;
        margin:auto 4px;
        vertical-align: top;
      }
      .icon-keyboard_arrow_right{
        font-size: 10px;
        position: absolute;
        right: 12px;
        bottom: 8px;
      }
    }
  }
</style>
